<template>
	<view class="">
		<view class="carBox" v-for="item in content" :key="item.id" @tap.stop="details(item)">
			<view class="typeBox" :class="['active-' + item.gdzt]">{{ caculType(item.gdzt) }}</view>
			<view class="boxTop">
				<view class="titleOne">
					<text class="titleBox">{{ item.title }}</text>
					<text style="float: right; color: #949596; font-size: $uni-font-size-custom-b; margin-top: 3px;">{{ item.zuobiao }}</text>
				</view>
				<view class="titleTwo">
					<view style="font-size: $uni-font-size-custom-e;">{{ item.ip }}</view>
					<text style="text-overflow:ellipsis; word-wrap:break-word; color: #606162; font-size: $uni-font-size-custom-b;">{{ item.dizi }}</text>
				</view>
				<view class="titleThree">
					<text class="titleBox">{{ item.wenti }}</text>
					<view style="margin-left: 18px; color: #949596; font-size: $uni-font-size-custom-d;">{{ item.xxwenti }}</view>
				</view>
			</view>
			<view class="boxBottom">
				<!-- :disabled="daohanShow(item)" -->
				<button type="default" :class="daohanShow(item) ? 'daohanBtn2' : 'daohanBtn'" @tap.stop="goNavigation(item)">
					<uni-icons style="margin-right: 5px;" :color="daohanShow(item) ? '#9B9B9B' : '#038bff'" type="paperplane" size="18"></uni-icons>
					<text>导航</text>
				</button>
				<button type="default" class="chuliBtn" @tap.stop="chuli(item)">录入处理过程</button>
			</view>
		</view>
	</view>
</template>

<script>
import { toMapAPP } from '@/utils/goMapApps.js';
import { getStorage } from '@/utils/setStorage.js';
export default {
	props: ['content'],
	data() {
		return {};
	},
	computed: {
		caculType() {
			// 计算属性传参需要使用闭包
			return function(index) {
				const arr = ['已受理', '待确认', '正常关闭', '驳回', '挂起', '外派', '异常关闭'];
				return arr[index - 1];
			};
		}
	},
	methods: {
		chuli(val) {
			const obj = {
				type: 1,
				num: 1,
				gdbh: val.gdbh
			};
			this.$emit('change', obj);
		},
		goNavigation(val) {
			if (val.latitude - 0 === 0 && val.longitude - 0 === 0) {
				return false;
			} else {
				return toMapAPP(val.latitude, val.longitude, val.title);
			}
		},
		details(e) {
			// #ifdef APP-PLUS
			uni.navigateTo({
				url: '/pages/details/index?bh=' + e.gdbh
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/details/index?bh=' + e.gdbh);
			// #endif
		},
		daohanShow(val) {
			if (val.latitude - 0 === 0 && val.longitude - 0 === 0) {
				return true;
			} else {
				return false;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.topBox {
	height: 20px;
	line-height: 20px;
	z-index: 10000;
}
.carBox {
	position: relative;
	border-radius: 10px;
	padding: 10px 10px;
	background-color: #ffffff;
	overflow: hidden;
	margin-bottom: 10px;
	.active-1 {
		// 已受理
		background-color: #e8f3ff;
		color: #2e92f7;
	}
	.active-2,
	.active-3 {
		// 已解决待确认2  正常关闭3
		background-color: #e6f8ef;
		color: #67c23a;
	}
	.active-4,
	.active-6 {
		// 驳回 4  // 外派 6
		background-color: #feefe5;
		color: #e6a23c;
	}
	.active-5 {
		// 挂起5
		background-color: #f4f4f5;
		color: #909399;
	}
	.active-7 {
		// 异常关闭
		background-color: #fef0f0;
		color: #f56c6c;
	}
	.typeBox {
		position: absolute;
		top: 0px;
		right: 0px;
		width: 80px;
		height: 25px;
		line-height: 25px;
		text-align: center;
		border-bottom-left-radius: 10px;
		// color: #ffffff;
		font-size: $uni-font-size-custom-d;
	}
	.boxTop {
		margin-top: 15px;
		.titleOne {
			position: relative;
			margin-left: 15px;
		}
		.titleOne::before {
			content: '';
			position: absolute;
			top: 8px;
			left: -15px;
			display: inline-block;
			width: 8px;
			height: 8px;
			background-color: #038bff;
			border-radius: 50%;
			// margin-right: 10px;
		}
		.titleTwo {
			border-left: 1px solid #cccccc;
			margin-left: 3px;
			padding: 0 3px 10px 15px;
		}
		.titleThree {
			position: relative;
			margin-left: 15px;
		}
		.titleThree::before {
			content: '';
			display: inline-block;
			position: absolute;
			top: 8px;
			left: -15px;
			width: 8px;
			height: 8px;
			background-color: #fa5151;
			border-radius: 50%;
			// margin-right: 10px;
		}
	}
	.boxBottom {
		margin-top: 15px;
		display: flex;
		.chuliBtn {
			height: 40px;
			padding: 0px 50px;
			background-color: #038bff;
			color: #ffffff;
			font-size: $uni-font-size-custom-e;
			border-radius: 5px;
		}
		.daohanBtn {
			height: 40px;
			line-height: 40px;
			padding: 0 20px;
			border: 1px solid #038bff;
			background-color: #ffffff;
			color: #038bff;
			margin-right: 10px;
		}
		.daohanBtn2 {
			height: 40px;
			line-height: 40px;
			padding: 0 20px;
			border: 1px solid #d8d8d8;
			background-color: #ffffff;
			color: #9b9b9b;
			margin-right: 10px;
		}
	}
}
.titleBox {
	display: inline-block;
	width: 500rpx;
	font-size: $uni-font-size-custom-e;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
